
<template>
  <div class="index">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img
          src="http://120.53.31.103:84/uploads/image/2021-09-08/lXEERcH4CIb3reka5yruT7RW7jMD4K7vreK6utgq.jpeg"
          alt=""
        />
      </van-swipe-item>
      <van-swipe-item
        ><img
          src="http://120.53.31.103:84/uploads/image/2021-09-08/zP1osWNNxyfKSX1Dt6IDUUh5Vpz8AxD39BBaQECW.jpeg"
          alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="http://120.53.31.103:84/uploads/image/2021-09-08/pihYvxiYLTL5XCVs0sMFzlvY2TfSUj95Tz0IWjgF.jpeg"
          alt=""
      /></van-swipe-item>
    </van-swipe>
    <div class="center">
      <ul>
        <li>
          <img src="../../assets/images/study.png" alt="" />
          <p>特色课</p>
        </li>
        <li>
          <img src="../../assets/theme-img/icon-concat-hover.png" alt="" />
          <p>一对一辅导</p>
        </li>
        <li>
          <img src="../../assets/theme-img/icon_person_setting.png" alt="" />
          <p>学习日历</p>
        </li>
      </ul>
    </div>
    <div class="content">
      <list v-for="(item, index) in List" :key="index" :item="item"> </list>
    </div>
  </div>
</template>

<script>
import { getAppIndex } from "@/utils/api";
import list from "../../components/list.vue";
// import {getBanner} from '../../utils/api'
export default {
  name: "",
  components: { list },
  data() {
    return {
      List: [],
    };
  },
  created() {
    // getBanner.then(res=>{
    //   console.log(res);
    // })
    getAppIndex().then((res) => {
      console.log(res.data.data);
      this.List = res.data.data;
    });
  },
  mounted() {},
  methods: {},
};
</script>
<style scoped lang='scss'>
.index {
  width: 100%;
  height: calc(100% - 100px);
  background-color: #f2f3f5;
  .my-swipe {
    width: 100%;
    height: 225px;
    .van-swipe-item {
      img {
        width: 100%;
        height: 225px;
      }
    }
  }
  .center {
    width: 100%;
    height: 148px;
    position: relative;
    ul {
      position: absolute;
      width: 100%;
      top: -30px;
      left: 50%;
      height: 148px;
      padding: 0 15px;
      transform: translateX(-50%);
      display: flex;
      text-align: center;
      justify-content: space-around;
      font-size: 14px;
      li {
        background-color: #fff;
        width: 23%;
        color: #8c8c8c;
        border-radius: 10px;
        padding-top: 45px;

        img {
          width: 30px;
          height: 32px;
        }
      }
      li:ntn-child(3) {
        margin-right: none;
      }
    }
  }
}
</style>
